﻿@using RuoVea.OmiSystem.Attributes
@using RuoVea.OmiSystem.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(RuoVea.OmiSystem.Language.i18n.menu_management)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style>.el-button [class*="el-icon-"] + span { margin-left: 1px !important; }</style>
</head>
<body>
    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                   :cell-style="cellStyle"
                   v-on:on-load="onLoad">
            <template slot="avatar" slot-scope="scope">
                <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
            </template>
            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>
        </avue-crud>
    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>

    <script>
        console.log(`${Vue.prototype.i18n.t('directory')}`)
        var typeDicData = [{ label: `${Vue.prototype.i18n.t('directory')}`, value: 0, }, { label: `${Vue.prototype.i18n.t('menu')}`, value: 1, }, { label: `${Vue.prototype.i18n.t('button')}`, value: 2, }];
        var isnoDicData = [{ label: `${Vue.prototype.i18n.t('yes')}`, value: true, }, { label: `${Vue.prototype.i18n.t('no')}`, value: false, }];

        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    name: "menu",
                    pageUrl: "/menu/pages",
                    addUrl: "/menu/add",
                    editUrl: "/menu/update",
                    deleteUrl: "/menu/delete",

                    option: {
                        searchShowBtn: Permissions.avePermission(`sysMenu:list`),
                        refreshBtn: Permissions.avePermission(`sysMenu:list`),

                        addBtn: Permissions.avePermission(`sysMenu:addMenu`),
                        editBtn: Permissions.avePermission(`sysMenu:updateMenu`),
                        delBtn: Permissions.avePermission(`sysMenu:deleteMenu`), 
                        viewBtn:true,
                        rowKey: 'id',
                        searchShow: false,
                        page: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            {
                                prop: "pid", label: `${this.i18n.t('parent_organization')}`, search: false, hide: true, showColumn: false, type: "cascader", defaultExpandAll: true, order: 120,
                                props: { label: 'title', value: 'id', children: 'children' }, dicUrl: `${Vue.prototype.$baseURL}/menu/menutree`, showAllLevels: false, emitPath: false, checkStrictly: true,
                            },
                            {
                                prop: "title", label: `${this.i18n.t('name')}`, search: false, hide: false, type: "select", clearable: true, width: 160, order: 100,
                                filterable: true, allowCreate: true,
                                dicData: [{ label: `${this.i18n.t('add')}`, value: `${this.i18n.t('add')}`, }, { label: `${this.i18n.t('edit')}`, value: `${this.i18n.t('edit')}`, }, { label: `${this.i18n.t('view')}`, value: `${this.i18n.t('view')}`, }, { label: `${this.i18n.t('delete')}`, value: `${this.i18n.t('delete')}`, }],
                                render: (h, { row }) => { return h('span', { class: row.icon, }, '  ' + row.title) },
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                            },
                            {
                                prop: "icon", label: "icon", search: false, hide: true, type: "icon", clearable: true, width: 45, showColumn: false, order: 90,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                                iconList: [{ label: `${this.i18n.t('icon')}`, list: elementIcons }]
                            },
                            {
                                prop: "type", label: `${this.i18n.t('type')}`, search: false, hide: false, type: "radio", width: 85, dicData: typeDicData, value: 0, button: true, order: 110,
                                control: (val, form) => {
                                    switch (val) {
                                        case 0: return { name: { display: true, row: true, }, permission: { display: false }, isIframe: { display: true }, path: { display: false }, };
                                        case 1: return { name: { display: true, row: true, }, permission: { display: false }, isIframe: { display: true }, path: { display: true },pid:{ rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],} };
                                        case 2: return { name: { display: false }, permission: { display: true }, isIframe: { display: false }, path: { display: false },pid:{ rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],} };
                                    }
                                },
                                render: (h, { row }) => {
                                    if (row.type === 0) return h('span', { class: { 'el-tag el-tag--success el-tag--light': true }, }, typeDicData[0].label)
                                    else if (row.type === 1) return h('span', { class: { 'el-tag el-tag--light': true }, }, typeDicData[1].label)
                                    else if (row.type === 2) return h('span', { class: { 'el-tag el-tag--info el-tag--light': true }, }, typeDicData[2].label)
                                }
                            },
                            {
                                prop: "name", label: `${this.i18n.t('code')}`, search: false, hide: false, type: "input", width: 140,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], row: true, placeholder: `${this.i18n.t('example')} :system_menu_index`
                            },
                            {
                                prop: "isIframe", label: `${this.i18n.t('is_embedded')}`, width: 70, hide: false, showColumn: false, value: false, dicData: isnoDicData, type: "radio", button: true,
                                control: (val, form) => {
                                    if (form.type < 2) {
                                        if (val == true) return { outLink: { display: true }, path: { display: false }, };
                                        else {
                                            if (form.type == 0)
                                                return { outLink: { display: false }, path: { display: false }, };
                                            else
                                                return { outLink: { display: false }, path: { display: true }, };
                                        }
                                    }
                                    else {
                                        return { outLink: { display: false }, path: { display: false }, };
                                    }
                                },
                            },
                            { prop: "outLink", label: `${this.i18n.t('external_link')}`, hide: false, type: "input", showColumn: false, display: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }] },
                            { prop: "path", label: `${this.i18n.t('path')}`, search: false, hide: false, type: "input", display: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}${this.i18n.t('example')}:/system/menu/index` }], placeholder: `${this.i18n.t('example')}:/system/menu/index` },
                            // { prop: "component", label: ${this.i18n.t('component_path')}, search: false, hide: false, width: 240, type: "input", rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}${this.i18n.t('example')}:/system/menu/index` }], display: false, placeholder:`${this.i18n.t('example')}:/system/menu/index`},
                            {
                                prop: "permission", label: `${this.i18n.t('permission_identifier')}`, search: false, hide: false, width: 180, type: "input", display: true, placeholder: `${this.i18n.t('example')}:menu:delBtn`,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                            },
                            { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number", step: 100, value: 100, clearable: true, width: 80, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", dicData: disableDicData, width: '80', },
                            { prop: "isHide", label: `${this.i18n.t('is_hidden')}`, search: false, hide: false, type: "radio", width: 70, value: false, dicData: isnoDicData, disabled: true },
                            { prop: "isKeepAlive", label: `${this.i18n.t('is_cached')}`, width: 70, type: "radio", hide: false, showColumn: false, value: false, dicData: isnoDicData, disabled: true },
                            { prop: "isAffix", label: `${this.i18n.t('is_fixed')}`, width: 70, hide: false, type: "radio", showColumn: false, value: false, dicData: isnoDicData, disabled: true },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, minWidth: 140, },
                        ]
                    }
                }
            },
            created() {
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 7) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
            }
        });
    </script>
</body>
</html>